<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<!-- <view class="ztl"
			:style="{'height':statusBarHeight}"></view> -->
		<!-- 占位盒子 -->
		<!-- <view class=""
			:style="{'height': height}"></view> -->
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">品牌专区</text>
		</navBar>
		
		<!-- 搜索栏 -->
		<view 
		style="background-color: #FFF;">
			<search 
			@searchBlur='searchBlur'
			:isLinks='false'
			bgColor="#F5F5F5">
			</search>
		</view>
		
		<view 
		:style="{'height': 'calc(100vh -  ' + demoTopHieght +  ')'}"
		class="mian_brand">
			<u-index-list :index-list="xArr" :customNavHeight="customNavHeight" activeColor="#EC4141" >
				<view class="remen">
					<view class="remen-top pd10">
						<image :src="xcxImgUrl && xcxImgUrl+'classitys/remen.svg'"
						style="width: 32rpx;height: 32rpx;"
						mode="aspectFill"
						class="mr10"
						></image>
						热门品牌
					</view>
					<view class="remen-list">
						<view 
						class="remen-item" 
						v-for="(item,index) of top8" 
						:key="index"
						@click="toSearch(item)" 
						 >
							<image :src="item.picture ? uploadImgUrl + item.picture : updateMorentu"
							style="width: 88rpx;height: 88rpx;"
							mode="aspectFill"
							></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				
				<template v-for="(item, index) in indexList" >
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="xArr[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor height="70rpx" bgColor="#F5f5f5" size="32rpx" color="#333" :text="xArr[index]" @select="selectA"></u-index-anchor>
						<!-- #endif -->
						<view 
						class="list-cell" 
						v-for="(cells, indexs) in item.data" :key="indexs" @click="toSearch(cells)">
							<image :src="cells.picture ? uploadImgUrl + cells.picture : updateMorentu" 
							style="width: 68rpx;height: 68rpx;vertical-align: middle;margin-left:40rpx;" 
							class="mr10 " 
							mode="aspectFill"></image>
							{{cells.name}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {listMallCommodityBrandPageInfo} from '@/api/global.js'
	import {uploadImgUrl} from '@/utils/request.js'
	let datas = [
					{
						letter:"#",
						data:[]
					},
					{
						letter:"A",
						data:[]
					},
					{
						letter:"B",
						data:[]
					},
					{
						letter:"C",
						data:[]
					},
					{
						letter:"D",
						data:[]
					},
					{
						letter:"E",
						data:[]
					},
					{
						letter:"F",
						data:[]
					},
					{
						letter:"G",
						data:[]
					},
					{
						letter:"H",
						data:[]
					},
					{
						letter:"I",
						data:[]
					},
					{
						letter:"J",
						data:[]
					},
					{
						letter:"K",
						data:[]
					},
					{
						letter:"L",
						data:[]
					},
					{
						letter:"M",
						data:[]
					},
					{
						letter:"N",
						data:[]
					},
					{
						letter:"O",
						data:[]
					},
					{
						letter:"P",
						data:[]
					},
					{
						letter:"Q",
						data:[]
					},
					{
						letter:"R",
						data:[]
					},
					{
						letter:"S",
						data:[]
					},
					{
						letter:"T",
						data:[]
					},
					{
						letter:"U",
						data:[]
					},
					{
						letter:"V",
						data:[]
					},
					{
						letter:"W",
						data:[]
					},
					{
						letter:"X",
						data:[]
					},
					{
						letter:"Y",
						data:[]
					},
					{
						letter:"Z",
						data:[]
					},
					
				];
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图 兼容小程序 直接在html写vuex不生效
			updateMorentu(){
				return  this.$store.state.morentu
			},
			customNavHeight(){
				console.log(uni.getSystemInfoSync().screenWidth)
				return uni.getSystemInfoSync() && uni.getSystemInfoSync().screenWidth*0.106;
			}
		},
		data() {
			return {
				sys:uni.getSystemInfoSync().screenWidth,
				statusBarHeight: '',
				height: '',
				top8:[],
				xArr : ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
				indexList:[
					// {
					// 	letter:"#",
					// 	data:[]
					// },
					{
						letter:"A",
						data:[]
					},
					{
						letter:"B",
						data:[]
					},
					{
						letter:"C",
						data:[]
					},
					{
						letter:"D",
						data:[]
					},
					{
						letter:"E",
						data:[]
					},
					{
						letter:"F",
						data:[]
					},
					{
						letter:"G",
						data:[]
					},
					{
						letter:"H",
						data:[]
					},
					{
						letter:"I",
						data:[]
					},
					{
						letter:"J",
						data:[]
					},
					{
						letter:"K",
						data:[]
					},
					{
						letter:"L",
						data:[]
					},
					{
						letter:"M",
						data:[]
					},
					{
						letter:"N",
						data:[]
					},
					{
						letter:"O",
						data:[]
					},
					{
						letter:"P",
						data:[]
					},
					{
						letter:"Q",
						data:[]
					},
					{
						letter:"R",
						data:[]
					},
					{
						letter:"S",
						data:[]
					},
					{
						letter:"T",
						data:[]
					},
					{
						letter:"U",
						data:[]
					},
					{
						letter:"V",
						data:[]
					},
					{
						letter:"W",
						data:[]
					},
					{
						letter:"X",
						data:[]
					},
					{
						letter:"Y",
						data:[]
					},
					{
						letter:"Z",
						data:[]
					},
					
				],
				remenList:[],
				pageData:{
					currentPage:1,
					pageSize:10
				},
				lastPage:1,//
				uploadImgUrl,
				search:``
			};
		},
		onShow() {
			this.$nextTick(()=>{
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_brand')
			})
		},
		onLoad() {
			this.getList('init')//获取品牌
		},
		methods:{
			searchFn(){
				console.log(99)
				this.search = ``;
				this.getList();
			},
			searchBlur(e){
				this.search = e;
				this.getList();
			},
			//返回上一级
			navToBack(){
				uni.navigateBack()
			},
			selectA(){
				console.log(9)
			},
			//去搜索
			toSearch(item){
				console.log(this.indexList,98,item);
				this.$store.state.searchName = item.name
				uni.navigateTo({
					url:`/page_public/publicClass?title=搜索`
				})
			},
			//获取列表
			async getList(params=''){
				uni.showLoading()
				let res = await listMallCommodityBrandPageInfo({
					sort:23,
					search:this.search
					// ...this.pageData
				})
				if(res.code == 2000){
					uni.hideLoading();
					if(params == 'init'){
						this.remenList = (res?.data?.info || []);
						//取前八
						this.top8 = this.remenList.slice(0,8)
					}else{
						this.remenList = [];
						this.indexList = JSON.parse(JSON.stringify(datas));
						this.remenList = (res?.data?.info || []);
					}
					
					this.lastPage = res?.data?.info?.lastPage;
					
					
					console.log(this.top8);
					//每个对象添加拼音 取首字母
					this.remenList.forEach((item, index) => {
					    this.remenList[index].pyName = this.pinyin.chineseToPinYin(item.name);
					})
					//根据首字母排序
					this.remenList.sort((a, b) => a['pyName'].localeCompare(b['pyName']))
					console.log(this.remenList);
					//循环数据和字数数组做对比
					for (let i = 0; i < this.remenList.length; i++) {
						//循环新字母索引 重新组装数据
						for (let j = 0; j < this.indexList.length; j++) {
							//截取第一个 字母 比较
							if(this.remenList[i].pyName.slice(0,1) == this.indexList[j].letter){
								console.log(9)
								this.indexList[j].data.push(this.remenList[i])
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mian_brand{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		.remen{
			width: 100%;
			// height: 460rpx;
			// border: 1px solid red;
			box-sizing: border-box;
			background: #fff;
			.remen-top{
				height: 60rpx;
				display: flex;
				align-items: center;
				color: $text_color_333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.remen-list{
				display: grid;
				grid-template-columns: repeat(4,1fr);
				gap: 20rpx;
				padding: 0 20rpx 20rpx 20rpx;
				.remen-item{
					width: 162rpx;
					height: 162rpx;
					border-radius: $border_radius_10;
					border: 1px solid rgba(230, 230, 230, 1);;
					background-color: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: $font_size_12;
					color: $text_color_333;
				}
			}
		}
		
		/deep/.u-index-list__letter{
			top:200rpx!important;
		}
		/* #ifndef MP-WEIXIN */
		/deep/.u-index-list uni-scroll-view{
			height:calc(100vh - 88rpx - 88rpx)!important;
			max-height: 100%!important;
		}
		/* #endif */
		/* #ifdef MP-WEIXIN */
		/deep/.u-index-list scroll-view{
			height:calc(100vh - 88rpx - 88rpx - 40rpx)!important;
			max-height:100%!important;
		}
		/* #endif */
		
		/deep/.u-transition{
			position: relative!important;
		}
	}

</style>
